<template>
    <div v-loading="loading" class="console-page domain-record">
        <el-row class="toolbar">
            <el-col :span="24" style="text-align:right">
                <el-button :icon="getIcon('refresh')" class="button-auto-resize" circle @click="getData" />
                <el-button :icon="getIcon('Plus')" class="button-auto-resize" circle @click="showRecordDrawer = true" />
            </el-col>
        </el-row>
        <el-table :data="recordData" border header-cell-class-name="el-table-header-cell"
            cell-class-name="el-table-cell" class="e-page table-without-pagination" highlight-current-row>
            <el-table-column prop="Status" label="状态" width="70">
                <template #default="scope">
                    <div class="flex-display-center">
                        <div :class="`${scope.row.Status === 'ENABLE' ? 'record-enable' : 'record-disable'}`" />
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="Name" label="主机记录" min-width="120" />
            <el-table-column prop="Type" label="记录类型" min-width="120" />
            <el-table-column prop="Line" label="线路" min-width="120" />
            <el-table-column prop="Value" label="记录值" min-width="300" />
            <el-table-column prop="MX" label="优先级" min-width="120" />
            <el-table-column prop="Weight" label="权重" min-width="120" />
            <el-table-column prop="TTL" label="TTL" min-width="120" />
            <el-table-column prop="Remark" label="备注" min-width="120" />
            <el-table-column prop="UpdatedOn" label="更新时间" min-width="190" />
            <el-table-column label="操作" fixed="right" :width="operationWidth" className="operation-column">
                <template #default="scope">
                    <el-button type="primary" :icon="getIcon('EditPen')" circle @click="editRecord(scope.row)"
                        class="button-auto-resize" :disabled="!Object.keys(map).includes(scope.row.Type)" />
                    <el-button type="danger" :icon="getIcon('SwitchButton')" circle @click="changeStatus(scope.row)"
                        class="button-auto-resize" :disabled="scope.row.Type === 'NS'"
                        :confirm-title="`确定${scope.row.Status === 'ENABLE' ? '关闭' : '开启'}该记录解析状态?`" />
                    <el-button type="danger" :icon="getIcon('Delete')" circle @click="deleteRecord(scope.row)"
                        class="button-auto-resize" :disabled="scope.row.Type === 'NS'" :confirm-title="`确定删除该记录?`" />
                </template>
            </el-table-column>
        </el-table>

        <el-drawer :show-close="false" size="550px" v-model="showRecordDrawer" destroy-on-close direction="rtl"
            class="forbid-select domain-record" @open="useModalSize()" @closed="close" append-to-body>
            <template #header>
                <div class="drawer-title">添加域名解析记录</div>
            </template>
            <div class="drawer-content">
                <div class="record">
                    <div class="record-label">记录类型</div>
                    <div class="record-content">
                        <el-select v-model="record.recordType" placeholder="请选择" class="record-select input-auto-resize"
                            popper-class="normal-poper">
                            <el-option label="A - 指向一个IPv4地址" value="A">
                                <span style="float: left;">A</span>
                                <span style="float: right;color: rgba(114,118,123,.6);">指向一个IPv4地址</span>
                            </el-option>
                            <el-option label="CNAME - 指向另外一个域名" value="CNAME">
                                <span style="float: left;">CNAME</span>
                                <span style="float: right;color: rgba(114,118,123,.6);">指向另外一个域名</span>
                            </el-option>
                            <el-option label="TXT - 附加文本信息" value="TXT">
                                <span style="float: left;">TXT</span>
                                <span style="float: right;color: rgba(114,118,123,.6);">附加文本信息</span>
                            </el-option>
                            <el-option label="AAAA - 指向一个IPv6地址" value="AAAA">
                                <span style="float: left;">AAAA</span>
                                <span style="float: right;color: rgba(114,118,123,.6);">指向一个IPv6地址</span>
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="record">
                    <div class="record-label">主机记录</div>
                    <div class="record-content">
                        <el-input v-model="record.subDomain" placeholder="@" class="input-auto-resize">
                            <template #append>.{{ instance.domain }}</template>
                        </el-input>
                    </div>
                </div>
                <div class="record">
                    <div class="record-label" checklabel>
                        <span>{{ map[record.recordType] }}</span>
                    </div>
                    <div class="record-content">
                        <el-input v-model="record.value" class="input-auto-resize"
                            :placeholder="`请输入${map[record.recordType]}`" check="value" />
                    </div>
                </div>
                <div class="record" v-if="record.recordType !== 'TXT'">
                    <div class="record-label">权重</div>
                    <div class="record-content">
                        <el-input-number v-model="record.weight" :min="0" :max="100" controls-position="right"
                            class="input-auto-resize" placeholder="0 ~ 100, 数值越大表示权重越高，空表示不设置" />
                    </div>
                </div>
                <div class="record">
                    <div class="record-label">TTL</div>
                    <div class="record-content">
                        <el-select v-model="record.TTL" placeholder="请选择" class="record-select input-auto-resize"
                            popper-class="normal-poper">
                            <el-option label="600 - 10分钟" value="600">
                                <span style="float: left;">600(推荐)</span>
                                <span style="float: right;color: rgba(114,118,123,.6);">10分钟</span>
                            </el-option>
                            <el-option label="60 - 1分钟" value="60">
                                <span style="float: left;">60</span>
                                <span style="float: right;color: rgba(114,118,123,.6);">1分钟</span>
                            </el-option>
                            <el-option label="3600 - 1小时" value="3600">
                                <span style="float: left;">3600</span>
                                <span style="float: right;color: rgba(114,118,123,.6);">1小时</span>
                            </el-option>
                            <el-option label="86400 - 1天" value="86400">
                                <span style="float: left;">86400</span>
                                <span style="float: right;color: rgba(114,118,123,.6);">1天</span>
                            </el-option>
                            <el-option label="604800 - 7天" value="604800">
                                <span style="float: left;">604800</span>
                                <span style="float: right;color: rgba(114,118,123,.6);">7天</span>
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="record">
                    <div class="record-label">状态</div>
                    <div class="record-content">
                        <el-switch v-model="record.status" active-text="开启" inactive-text="暂停" active-value="ENABLE"
                            inactive-value="DISABLE" class=" fit-auto-resize cursor-pointer" inline-prompt />
                        <span :style="`color: ${record.status === 'DISABLE' ? 'red' : 'green'};`" class="status-desc">
                            {{ record.status === 'ENABLE' ? '解析生效可能会有延迟' : '解析不会生效，也不会验证负载均衡的限制' }}
                        </span>
                    </div>
                </div>
                <div class="record">
                    <div class="record-label">备注</div>
                    <div class="record-content">
                        <el-input v-model="record.remark" class="input-auto-resize" placeholder="该解析记录的备注信息，非必填" />
                    </div>
                </div>
                <div class="record">
                    <div class="record-button">
                        <div @click="submit" class="cursor-pointer submit" v-ripple>提交</div>
                    </div>
                    <div class="record-button">
                        <div @click="showRecordDrawer = false" class="cursor-pointer cancel">取消</div>
                    </div>
                </div>
            </div>
        </el-drawer>
    </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { useSetTableOperationWidth, useModalSize, useRequest, useElMessage, useElLoading, useDataCheck } from "@usehook"
import { getIcon } from "@/utils/tools"
import router from "@/router"

let loading = $ref(false)
let recordData = $ref([])
const operationWidth = useSetTableOperationWidth(3)
const instance = router.currentRoute.value.query
let showRecordDrawer = $ref(false)
let record = $ref({ recordType: "A", subDomain: "", value: "", weight: null, TTL: "600", remark: "", status: "ENABLE", recordLine: "默认" })
const { check } = useDataCheck({ "value": "内容不能为空" })

let map = { "A": "Ipv4地址", "AAAA": "Ipv6地址", "TXT": "文本内容", "CNAME": "域名" }

const getData = () => {
    loading = true
    useRequest("/tencentCloud/describeRecordList", instance).then(resp => {
        if (resp && resp.status) {
            recordData = resp.data.RecordList
        }
    }).finally(_ => {
        loading = false
    })
}

const close = () => {
    useModalSize(false)
    record = { recordType: "A", subDomain: "", value: "", weight: null, TTL: "600", remark: "", status: "ENABLE", recordLine: "默认" }
}

const editRecord = (row) => {
    record = { recordType: row.Type, subDomain: row.Name, value: row.Value, weight: row.Weight, TTL: row.TTL, remark: row.Remark, status: row.Status, recordLine: row.Line, recordId: row.RecordId }
    showRecordDrawer = true
}

const changeStatus = (row) => {
    loading = true
    useRequest.post("/tencentCloud/modifyRecordStatus", { ...instance, recordId: row.RecordId, status: row.Status === 'ENABLE' ? 'DISABLE' : 'ENABLE' }).then((resp) => {
        if (resp && resp.status && resp.data.RequestId) {
            useElMessage.success("解析状态修改成功")
            getData()
        } else if (resp.message) {
            useElMessage.error(resp.message)
        }
    }).finally(_ => {
        loading = false
    })

}

const deleteRecord = (row) => {
    loading = true
    useRequest.post("/tencentCloud/deleteRecord", { ...instance, recordId: row.RecordId }).then((resp) => {
        if (resp && resp.status && resp.data.RequestId) {
            useElMessage.success("删除成功")
            getData()
        } else if (resp.message) {
            useElMessage.error(resp.message)
        }
    }).finally(_ => {
        loading = false
    })
}

const submit = () => {
    check().then(() => {
        const useloading = useElLoading({ text: record.recordId ? "正在提交修改记录" : "正在提交新增记录" })
        useRequest.post(record.recordId ? "/tencentCloud/modifyRecord" : "/tencentCloud/createRecord", { ...record, ...instance }).then((resp) => {
            if (resp && resp.status && resp.data.RecordId && resp.data.RequestId) {
                useElMessage.success(record.recordId ? "记录修改成功" : "记录添加成功")
                getData()
                showRecordDrawer = false
            }
        }).finally(_ => {
            useloading.close()
        })
    })
}

onMounted(() => {
    getData()
})

</script>

<style>
.domain-record .record {
    display: inline-flex;
    width: 100%;
}

.domain-record .record+.record {
    padding-top: 20px;
}

.domain-record .record-label {
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 15px;
}

.domain-record .record-content {
    width: calc(100% - 120px);
}

.domain-record .record-button {
    width: 50%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.domain-record .record-button .submit {
    background: #b7d7ff;
    padding: 10px 20px;
    border-radius: 3px;
}

.domain-record .record-button .cancel {
    background: #dddddd;
    padding: 10px 20px;
    border-radius: 3px;
}

.domain-record .status-desc {
    font-size: calc(var(--font-size) - 2px);
    padding-left: 10px;
}

.domain-record .record-enable {
    background: green;
    width: 15px;
    height: 15px;
    border-radius: 50%;
}

.domain-record .record-disable {
    background: red;
    width: 15px;
    height: 15px;
    border-radius: 50%;
}
</style>
